<template>
  <div class="tag-setting-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="title">检索标签设置</div>
        <div class="subtitle">智能标签体系管理</div>
      </div>
    </div>

    <!-- 路由导航 -->
    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/files">
            <FolderOutlined />
            档案文件管理
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <router-link to="/files/digital-archive">
            <ScanOutlined />
            纸质档案数字化
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <TagsOutlined />
          {{ $route.meta.title }}
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <TagsOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">标签总数</div>
              <div class="stat-value">{{ tagStats.totalTags }}</div>
              <div class="stat-label">个标签</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <FireOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">热门标签</div>
              <div class="stat-value">{{ tagStats.popularTags }}</div>
              <div class="stat-label">个热门</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <BarChartOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">覆盖率</div>
              <div class="stat-value">{{ tagStats.coverage }}%</div>
              <div class="stat-label">档案覆盖</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <SearchOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">检索效率</div>
              <div class="stat-value">{{ tagStats.searchEfficiency }}%</div>
              <div class="stat-label">提升效率</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 标签管理功能 -->
    <div class="tag-management-section">
      <a-row :gutter="[24, 24]">
        <!-- 标签分类管理 -->
        <a-col :xs="24" :lg="8">
          <a-card title="标签分类" :bordered="false">
            <div class="category-actions">
              <a-button type="primary" size="small" @click="addTagCategory">
                <PlusOutlined />
                添加分类
              </a-button>
            </div>

            <div class="tag-categories">
              <div v-for="category in tagCategories" :key="category.id" class="category-item" :class="{ active: selectedCategory?.id === category.id }" @click="selectCategory(category)">
                <div class="category-header">
                  <div class="category-name">{{ category.name }}</div>
                  <div class="category-count">{{ category.tagCount }}</div>
                </div>
                <div class="category-description">{{ category.description }}</div>
              </div>
            </div>
          </a-card>
        </a-col>

        <!-- 标签列表 -->
        <a-col :xs="24" :lg="16">
          <a-card title="标签管理" :bordered="false">
            <div class="tag-actions">
              <a-space>
                <a-button type="primary" @click="addTag">
                  <PlusOutlined />
                  添加标签
                </a-button>
                <a-button @click="batchImport">
                  <ImportOutlined />
                  批量导入
                </a-button>
                <a-button @click="exportTags">
                  <ExportOutlined />
                  导出标签
                </a-button>
              </a-space>

              <a-input-search v-model:value="searchKeyword" placeholder="搜索标签" style="width: 300px; margin-left: 16px" @search="searchTags" />
            </div>

            <a-table :columns="tagColumns" :data-source="filteredTags" :pagination="{ pageSize: 12 }" row-key="id" size="small">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'name'">
                  <a-tag :color="record.color">{{ record.name }}</a-tag>
                </template>
                <template v-if="column.key === 'usage'">
                  <a-progress :percent="Math.round(record.usage / 1000)" size="small" :show-info="false" />
                  <span style="margin-left: 8px">{{ record.usage }}</span>
                </template>
                <template v-if="column.key === 'action'">
                  <a-space>
                    <a-button size="small" @click="editTag(record)">编辑</a-button>
                    <a-button size="small" @click="viewTagUsage(record)">使用统计</a-button>
                    <a-button size="small" danger @click="deleteTag(record)">删除</a-button>
                  </a-space>
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 标签关联分析 -->
    <div class="tag-analysis-section">
      <a-card title="标签关联分析" :bordered="false">
        <a-row :gutter="[16, 16]">
          <!-- 热门标签云 -->
          <a-col :xs="24" :lg="12">
            <div class="tag-cloud-container">
              <h4>热门标签云</h4>
              <div class="tag-cloud">
                <a-tag
                  v-for="tag in popularTagCloud"
                  :key="tag.id"
                  :style="{
                    fontSize: `${tag.size}px`,
                    margin: '4px'
                  }"
                  :color="tag.color"
                  @click="viewTagDetail(tag)"
                >
                  {{ tag.name }}
                </a-tag>
              </div>
            </div>
          </a-col>

          <!-- 标签使用趋势 -->
          <a-col :xs="24" :lg="12">
            <div class="tag-trends">
              <h4>标签使用趋势</h4>
              <div class="trend-list">
                <div v-for="trend in tagTrends" :key="trend.id" class="trend-item">
                  <div class="trend-info">
                    <span class="trend-name">{{ trend.name }}</span>
                    <span class="trend-change" :class="trend.changeType"> {{ trend.change }}% </span>
                  </div>
                  <a-progress :percent="trend.usage" size="small" :stroke-color="getTrendColor(trend.changeType)" :show-info="false" />
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </div>

    <!-- 智能标签推荐 -->
    <div class="tag-recommendation-section">
      <a-card title="智能标签推荐" :bordered="false">
        <div class="recommendation-config">
          <a-form layout="inline">
            <a-form-item label="推荐算法">
              <a-select v-model:value="recommendConfig.algorithm" style="width: 150px">
                <a-select-option value="tf-idf">TF-IDF</a-select-option>
                <a-select-option value="word2vec">Word2Vec</a-select-option>
                <a-select-option value="bert">BERT</a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="推荐数量">
              <a-input-number v-model:value="recommendConfig.count" :min="5" :max="50" />
            </a-form-item>

            <a-form-item>
              <a-button type="primary" @click="generateRecommendations">
                <RobotOutlined />
                生成推荐
              </a-button>
            </a-form-item>
          </a-form>
        </div>

        <div class="recommendations" v-if="recommendedTags.length > 0">
          <h4>推荐标签</h4>
          <div class="recommended-tags">
            <div v-for="tag in recommendedTags" :key="tag.id" class="recommended-tag">
              <a-tag :color="tag.color" style="margin: 4px">
                {{ tag.name }}
                <span class="confidence">({{ (tag.confidence * 100).toFixed(1) }}%)</span>
              </a-tag>
              <a-button size="small" type="link" @click="adoptTag(tag)"> 采用 </a-button>
            </div>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { HomeOutlined, FolderOutlined, ScanOutlined, TagsOutlined, FireOutlined, BarChartOutlined, SearchOutlined, PlusOutlined, ImportOutlined, ExportOutlined, RobotOutlined } from '@ant-design/icons-vue'

// 标签统计
const tagStats = reactive({
  totalTags: 15672,
  popularTags: 234,
  coverage: 92,
  searchEfficiency: 78
})

// 推荐配置
const recommendConfig = reactive({
  algorithm: 'bert',
  count: 20
})

// 搜索关键词
const searchKeyword = ref('')

// 选中的分类
const selectedCategory = ref(null)

// 标签分类
const tagCategories = ref([
  {
    id: 1,
    name: '人物相关',
    description: '人物姓名、身份、职业等',
    tagCount: 3456
  },
  {
    id: 2,
    name: '时间相关',
    description: '朝代、年份、节气等',
    tagCount: 2345
  },
  {
    id: 3,
    name: '地理相关',
    description: '地名、区域、方位等',
    tagCount: 1890
  },
  {
    id: 4,
    name: '事件相关',
    description: '事件类型、性质、结果等',
    tagCount: 4567
  }
])

// 表格列定义
const tagColumns = [
  { title: '标签名称', key: 'name', width: 150 },
  { title: '分类', dataIndex: 'category', key: 'category' },
  { title: '使用次数', key: 'usage', width: 150 },
  { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
  { title: '创建者', dataIndex: 'creator', key: 'creator' },
  { title: '操作', key: 'action', width: 200 }
]

// 标签数据
const allTags = ref([
  {
    id: 1,
    name: '轮回转世',
    category: '事件相关',
    usage: 8956,
    createTime: '2023-01-01',
    creator: '系统',
    color: 'blue'
  },
  {
    id: 2,
    name: '善恶报应',
    category: '事件相关',
    usage: 7234,
    createTime: '2023-01-02',
    creator: '管理员',
    color: 'green'
  },
  {
    id: 3,
    name: '地府审判',
    category: '事件相关',
    usage: 6789,
    createTime: '2023-01-03',
    creator: '系统',
    color: 'red'
  }
])

// 过滤后的标签
const filteredTags = computed(() => {
  let tags = allTags.value

  if (selectedCategory.value) {
    tags = tags.filter((tag) => tag.category === selectedCategory.value.name)
  }

  if (searchKeyword.value) {
    tags = tags.filter((tag) => tag.name.includes(searchKeyword.value) || tag.category.includes(searchKeyword.value))
  }

  return tags
})

// 热门标签云
const popularTagCloud = ref([
  { id: 1, name: '轮回', size: 24, color: 'blue' },
  { id: 2, name: '业力', size: 20, color: 'green' },
  { id: 3, name: '审判', size: 18, color: 'red' },
  { id: 4, name: '善恶', size: 16, color: 'orange' },
  { id: 5, name: '转世', size: 14, color: 'purple' }
])

// 标签趋势
const tagTrends = ref([
  { id: 1, name: '轮回转世', usage: 85, change: 12, changeType: 'up' },
  { id: 2, name: '善恶报应', usage: 78, change: -5, changeType: 'down' },
  { id: 3, name: '地府审判', usage: 92, change: 8, changeType: 'up' }
])

// 推荐标签
const recommendedTags = ref([])

// 方法
const selectCategory = (category) => {
  selectedCategory.value = category
}

const addTagCategory = () => {
  console.log('添加标签分类')
}

const addTag = () => {
  console.log('添加标签')
}

const batchImport = () => {
  console.log('批量导入标签')
}

const exportTags = () => {
  console.log('导出标签')
}

const searchTags = () => {
  console.log('搜索标签:', searchKeyword.value)
}

const editTag = (record) => {
  console.log('编辑标签:', record)
}

const viewTagUsage = (record) => {
  console.log('查看标签使用统计:', record)
}

const deleteTag = (record) => {
  console.log('删除标签:', record)
}

const viewTagDetail = (tag) => {
  console.log('查看标签详情:', tag)
}

const getTrendColor = (changeType) => {
  return changeType === 'up' ? '#52c41a' : '#ff4d4f'
}

const generateRecommendations = () => {
  // 模拟生成推荐标签
  recommendedTags.value = [
    { id: 1, name: '因果循环', confidence: 0.95, color: 'blue' },
    { id: 2, name: '功德圆满', confidence: 0.88, color: 'green' },
    { id: 3, name: '罪孽深重', confidence: 0.82, color: 'red' }
  ]
}

const adoptTag = (tag) => {
  console.log('采用推荐标签:', tag)
}
</script>

<style lang="scss" scoped>
.tag-setting-container {
  padding: 24px;

  .page-header {
    text-align: center;
    margin-bottom: 24px;

    .header-content {
      .title {
        font-size: 28px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
      }

      .subtitle {
        font-size: 14px;
        color: $text-secondary;
      }
    }
  }

  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  .stats-section {
    margin-bottom: 24px;

    .stat-card {
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      display: flex;
      align-items: center;
      gap: 12px;

      .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, $secondary-color, #f0c674);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: white;
      }

      .stat-content {
        .stat-title {
          font-size: 14px;
          color: $text-secondary;
          margin-bottom: 4px;
        }

        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: $primary-color;
          margin-bottom: 2px;
        }

        .stat-label {
          font-size: 12px;
          color: $text-secondary;
        }
      }
    }
  }

  .tag-management-section,
  .tag-analysis-section,
  .tag-recommendation-section {
    margin-bottom: 24px;

    :deep(.ant-card) {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 12px;
    }
  }

  .category-actions {
    margin-bottom: 16px;
  }

  .tag-categories {
    .category-item {
      padding: 12px;
      border-radius: 8px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid rgba(212, 153, 10, 0.2);

      &:hover {
        background: rgba(212, 153, 10, 0.1);
      }

      &.active {
        background: rgba(212, 153, 10, 0.2);
        border-color: $secondary-color;
      }

      .category-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;

        .category-name {
          font-weight: bold;
          color: $primary-color;
        }

        .category-count {
          background: $secondary-color;
          color: white;
          padding: 2px 8px;
          border-radius: 12px;
          font-size: 12px;
        }
      }

      .category-description {
        font-size: 12px;
        color: $text-secondary;
      }
    }
  }

  .tag-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }

  .tag-cloud-container {
    .tag-cloud {
      padding: 16px;
      border-radius: 8px;
      min-height: 200px;
    }
  }

  .tag-trends {
    .trend-list {
      .trend-item {
        margin-bottom: 12px;

        .trend-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 4px;

          .trend-name {
            font-weight: bold;
            color: $primary-color;
          }

          .trend-change {
            font-size: 12px;
            font-weight: bold;

            &.up {
              color: #52c41a;
            }

            &.down {
              color: #ff4d4f;
            }
          }
        }
      }
    }
  }

  .recommendation-config {
    margin-bottom: 24px;
    padding: 16px;
    border-radius: 8px;
  }

  .recommendations {
    .recommended-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;

      .recommended-tag {
        display: flex;
        align-items: center;
        gap: 8px;

        .confidence {
          font-size: 12px;
          color: $text-secondary;
        }
      }
    }
  }
}
</style>
